<template>
    <div>
        <el-row :gutter="16">
            <el-col :span="4" :offset="0">
                <el-card shadow="never" class="stat-card">
                    <div class="stat-container">
                        <div class="stat-icon"><el-icon class="icon-style"><Document /></el-icon></div>
                        <div>
                            <div class="stat-label">文章</div>
                            <CountTo :value="articleTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4" :offset="0">
                <el-card shadow="never" :body-style="{ padding: '20px' }" class="stat-card">
                    <div class="stat-container">
                        <div class="stat-icon"><el-icon class="icon-style"><Folder /></el-icon></div>
                        <div>
                            <div class="stat-label">分类</div>
                            <CountTo :value="categoryTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4" :offset="0">
                <el-card shadow="never" :body-style="{ padding: '20px' }" class="stat-card">
                    <div class="stat-container">
                        <div class="stat-icon"><el-icon class="icon-style"><PriceTag /></el-icon></div>
                        <div>
                            <div class="stat-label">标签</div>
                            <CountTo :value="tagTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="4" :offset="0">
                <el-card shadow="never" :body-style="{ padding: '20px' }" class="stat-card">
                    <div class="stat-container">
                        <div class="stat-icon"><el-icon class="icon-style"><View /></el-icon></div>
                        <div>
                            <div class="stat-label">总浏览量</div>
                            <CountTo :value="pvTotalCount"></CountTo>
                        </div>
                    </div>
                </el-card>
            </el-col>
            
        </el-row>

        <el-row :gutter="20" class="chart-row">
            <el-col :span="10" :offset="0">
<!--                <ArticlePublishChart></ArticlePublishChart>-->
            </el-col>
            <el-col :span="10" :offset="0">
<!--                <PVChart></PVChart>-->
            </el-col>
        </el-row>
        
    </div>


</template>

<script setup>
import CountTo from '@/components/CountTo.vue'
import ArticlePublishChart from '@/components/ArticlePublishChart.vue'
import PVChart from '@/components/PVChart.vue'
import { ref } from 'vue'
import { getDashboardArticleStatisticsInfo } from '@/api/admin/dashboard'


const articleTotalCount = ref(0)
const categoryTotalCount = ref(0)
const tagTotalCount = ref(0)
const pvTotalCount = ref(0)

getDashboardArticleStatisticsInfo().then((e) => {
    if (e.success) {
        articleTotalCount.value = e.data.articleTotalCount
        categoryTotalCount.value = e.data.categoryTotalCount
        tagTotalCount.value = e.data.tagTotalCount
        pvTotalCount.value = e.data.pvTotalCount
    }
})


</script>

<style scoped>
.stat-card {
    border: 1px solid #eee;
}

.stat-container {
    display: flex;
    align-items: center;
}

.stat-icon {
    margin-right: 1rem;
}

.icon-style {
    color: #6b7280;
    font-size: 1.25rem;
    border-radius: 9999px;
    background-color: #f3f4f6;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-label {
    color: #6b7280;
}

.chart-row {
    margin-top: 1.25rem;
}
</style>


